<div id="viewer-container" />
<div>
  <div id="label-info">我是2d标签,我不会变大变小，会一直面向你</div>
  <div id="label-info-3d">我是3d标签,我会变大变小，<br>不会一直面向你</div>
</div>
<style>
  #label-info {
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 10px;
    color: #cecece;
    border-radius: 5px;
  }

  #label-info-3d {
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 10px;
    color: #cecece;
    border-radius: 5px;
  }
</style>
<script>
  CTS.ready(() => {
    let viewer = new CTS.Viewer('viewer-container') //初始化场景
    new CTS.ModelLoder(viewer).loadModelToScene('resources/model/building.glb')
    viewer.camera.position.set(30, 70, 70) //设置相机位置
    let labels = new CTS.Labels(viewer)
    const div = document.getElementById('label-info')
    let label2d = labels.addDivLabel(div, [0, 5, 0])

    let up = 0.05
    let runPoint = () => {
      // 修改位置
      label2d.position.x += up
      if (label2d.position.x > 10) up = -0.05
      else if (label2d.position.x < -10) up = 0.05
    }
    viewer.addAnimate(runPoint)

    const div3 = document.getElementById('label-info-3d')
    let label3d = labels.addDivLabel(div3, [5, 20, 0], '3d')

    let runPoint3d = () => {
      label3d.rotation.y += 0.005 //修改朝向
    }
    viewer.addAnimate(runPoint3d)

    function getRandomCoordinatesAroundOrigin(radius) {
      // 生成一个-1到1之间的随机数，然后乘以半径
      const x = (Math.random() * 2 - 1) * radius
      const z = (Math.random() * 2 - 1) * radius
      return [x, 6, z]
    }

    for (let i = -10; i < 100; i++) {
      // 添加精灵标签
      labels.addSprite('/resources/icon/redalert.png', getRandomCoordinatesAroundOrigin(50), [2, 1, 1])
    }
  })
</script>
